<template>
	<div class="foodwrap">
		<div class="foodtitle">
			<div><i :class="['iconfont',classname]"></i>{{type}}</div>
			<div>{{typeAbout}}</div>
			<div>更多></div>
		</div>
		<div class="foodType">
			<foodtype v-bind:items="fruits"></foodtype>
		</div>
	</div>
</template>

<script>
	import foodtype from "./foodtype.vue"
	export default {
		components: {
			foodtype
		},
		props: {
			classname: String,
			type: String,
			typeAbout: String,
			items:Array
		},
		data() {
			return {
				fruits: [{
						id:'1',
						foodImg:require('../../public/images/baner-16.png'),
						foodName: '新西兰佳沛黄金奇异果',
						foodText: '果肉绵蜜，花蜜般的甘甜白吃不厌',
						newMoney: '28.80',
						oldMoney: '40.00'
					},
					{	
						id:'2',
						foodImg:require('../../public/images/banner-15.png'),
						foodName: '新西兰佳沛黄金奇异果',
						foodText: '果肉绵蜜，花蜜般的甘甜白吃不厌',
						newMoney: '28.80',
						oldMoney: '40.00'
					}, {
						id:'3',
						foodImg:require('../../public/images/banner-14.png'),
						foodName: '新西兰佳沛黄金奇异果',
						foodText: '果肉绵蜜，花蜜般的甘甜白吃不厌',
						newMoney: '28.80',
						oldMoney: '40.00'
					}, {
						id:'4',
						foodImg:require('../../public/images/banner-13.png'),
						foodName: '新西兰佳沛黄金奇异果',
						foodText: '果肉绵蜜，花蜜般的甘甜白吃不厌',
						newMoney: '28.80',
						oldMoney: '40.00'
					},
				]
			}
		},
	}
</script>

<style>
	.foodwrap {
		width: 66.7%;
		height: 574px;
		margin: auto;
	}

	.foodtitle {
		width: 100%;
		height: 102px;
		background: #ebffe8;
		border-bottom: 1px solid #6ea865;
	}

	.foodtitle i {
		font-size: 30px;
		margin-right: 5px;
	}

	.foodtitle div:nth-of-type(1) {
		font-size: 30px;
		height: 102px;
		color: #498e3d;
		line-height: 102px;
		float: left;
	}

	.foodtitle div:nth-of-type(2) {
		font-size: 22px;
		height: 102px;
		line-height: 102px;
		margin-left: 3%;
		color: #bcc6bb;
		float: left;
	}

	.foodtitle div:nth-of-type(3) {
		font-size: 20px;
		height: 102px;
		line-height: 102px;
		color: #bcc6bb;
		float: right;
	}
</style>
